<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>运动-运动ing</title>
</head>

<body>
    <main>
        <div class="container mt20">
            <!-- 户外跑 -->
            <div class="outdoors">
                <div>
                    <h6>户外跑</h6>
                    <h4>运动中</h4>
                </div>
                <i class="iconfont icon-yinle"></i>
                <b class="iconfont icon-tiaojiepeizhi"></b>
            </div>

            <!-- 公里数 -->
            <div class="kilometre">
                <span>99.99</span> 公里
            </div>

            <!-- GPS -->
            <div class="GPS">
                <p>GPS信号度低, 数据精准度低</p>
                <b></b>
                <i class="iconfont icon-dingwei1" id="gps"></i>
            </div>

            <!-- 配速+用时+千卡 -->
            <div class="pace-time-kcal">
                <!-- 配速 -->
                <div class="pace">
                    <i class="iconfont icon-sudu"></i>
                    <p>配速</p>
                    <span>--</span>
                </div>
                <!-- 用时 -->
                <div class="time">
                    <i class="iconfont icon-shijian"></i>
                    <p>用时</p>
                    <span>00:00:20</span>
                </div>
                <!-- 千卡 -->
                <div class="kcal">
                    <i class="iconfont icon-qialuli"></i>
                    <p>千卡</p>
                    <span>3000</span>
                </div>
            </div>

            <!-- 暂停按钮 -->
            <div class="suspend">
                <div id="stopBtn">
                    <i class="iconfont icon-24gf-pause2"></i>
                    <span>暂停</span>
                </div>
                <b class="iconfont icon-suoding"></b>
            </div>
            <!-- 开始按钮 -->
            <div class="continue-end">
                <div class="continue" id="continue">
                    <i class="iconfont icon-bofang"></i>
                    <p>继续训练</p>
                </div>
                <div class="end" id="end">
                    <i class="iconfont icon-jieshu"></i>
                    <p>结束训练</p>
                </div>
            </div>
        </div>
    </main>
</body>

</html>